<template>
  <div class="reservation-area" data-info="预约">
    <el-button class="next" @click="handleNext" type="primary">
      下一步{{ steps }}
    </el-button>

    <div class="step-comps-area" data-info="具体的业务">
      <component :is="curCompName"  @handleSure="handleSure"/>
    </div>
    <!--底部操作-->
    <PatientNumberOperate :time="backcountdown" @handleBack="handlePre"/>
  </div>
</template>

<script>

import CardType from '../comps/cardType';
import MedInsCode from '../comps/medInsCode';
import PatientInfo from '../comps/patientInfo';
import QueryTime from '../comps/QueryTime';
import PatientNumberOperate from '../comps/patientNumberOperate'

import { AndroidToWeb, buildParentApi } from "@/utils/designer/util";
let buildParent = buildParentApi();
export default {
  name: 'ReplenishmentMode',

  componentName: "ReplenishmentMode",

  components: {
    CardType,
    MedInsCode,
    PatientInfo,
    QueryTime,
    PatientNumberOperate,
  },

  data() {
    return {
      steps: 1,
      backcountdown: 120000,
      curCompName: 'CardType',
      compsOptions: {
        1: 'CardType',
        2: 'MedInsCode',
        3: 'PatientInfo',
        4: 'QueryTime',
      },
    }
  },

  computed: {
    shownOperate() {
      return this.steps !== 1;
    }
  },

  mounted() {
  },

  methods: {
    /**
     * @name 打印去请求接口
     */
    getPrint(){
      buildParent.executeParentMethod(
        "axiosRep",
        paramsInfo,
        "QueryCostSummary"
      );
    },
    handleSure(){
        this.steps = ++(this.steps)
    },
    handleNext() {
      if (this.steps === 4) {
        this.steps = 1
      } else {
        this.steps = ++(this.steps)
      }
    },

    // 返回上一层&首页
    handlePre() {
      if (this.steps === 1) {
        this.$router.push({
          path: `/Replenishment/2`
        });
      } else {
        this.steps = --(this.steps)
      }
    },
  },

  watch: {
    // 步距
    steps: {
      handler: function (val) {
        const self = this;
        self.curCompName = Reflect.get(self.compsOptions, val);
      },
      deep: true,
      immediate: true,
    },
  }
}

</script>

<style scoped lang="scss">
@import "./assets/style";
</style>